<template>
  <div class="my-page">
    <!-- 用户信息卡片 -->
    <div class="user-card card">
      <div class="user-info" v-if="userStore.isLoggedIn">
        <img :src="userInfo?.avatar || '/images/default-avatar.svg'" alt="头像" class="avatar" />
        <div class="user-details">
          <div class="nickname">{{ userInfo?.nickname || '未设置昵称' }}</div>
          <div class="mobile">{{ userInfo?.mobile || '未绑定手机' }}</div>
        </div>
        <van-icon name="arrow" size="16" color="#999" />
      </div>
      
      <div class="login-prompt" v-else @click="goToLogin">
        <img src="/images/default-avatar.svg" alt="头像" class="avatar" />
        <div class="login-text">
          <div class="title">点击登录</div>
          <div class="subtitle">登录后享受更多功能</div>
        </div>
        <van-icon name="arrow" size="16" color="#999" />
      </div>
    </div>
    
    <!-- 功能菜单 -->
    <div class="menu-section">
      <!-- 我的内容 -->
      <div class="menu-group card">
        <div class="group-title">我的内容</div>
        <div class="menu-item" @click="goToMyPosts">
          <div class="menu-left">
            <van-icon name="edit" size="20" color="#636DEA" />
            <span class="menu-text">我的发布</span>
          </div>
          <div class="menu-right">
            <span class="count" v-if="myPostsCount > 0">{{ myPostsCount }}</span>
            <van-icon name="arrow" size="16" color="#999" />
          </div>
        </div>
        
        <div class="menu-item" @click="goToMyFavorites">
          <div class="menu-left">
            <van-icon name="star-o" size="20" color="#ff6b6b" />
            <span class="menu-text">我的收藏</span>
          </div>
          <div class="menu-right">
            <span class="count" v-if="myFavoritesCount > 0">{{ myFavoritesCount }}</span>
            <van-icon name="arrow" size="16" color="#999" />
          </div>
        </div>
        
        <div class="menu-item" @click="goToMyComments">
          <div class="menu-left">
            <van-icon name="chat-o" size="20" color="#4ecdc4" />
            <span class="menu-text">我的评论</span>
          </div>
          <div class="menu-right">
            <van-icon name="arrow" size="16" color="#999" />
          </div>
        </div>
      </div>
      
      <!-- 设置 -->
      <div class="menu-group card">
        <div class="group-title">设置</div>
        <div class="menu-item" @click="goToSettings">
          <div class="menu-left">
            <van-icon name="setting-o" size="20" color="#95a5a6" />
            <span class="menu-text">设置</span>
          </div>
          <div class="menu-right">
            <van-icon name="arrow" size="16" color="#999" />
          </div>
        </div>
        
        <div class="menu-item" @click="goToAbout">
          <div class="menu-left">
            <van-icon name="info-o" size="20" color="#3498db" />
            <span class="menu-text">关于我们</span>
          </div>
          <div class="menu-right">
            <van-icon name="arrow" size="16" color="#999" />
          </div>
        </div>
      </div>
      
      <!-- 退出登录 -->
      <div class="logout-section" v-if="userStore.isLoggedIn">
        <van-button 
          type="danger" 
          size="large" 
          @click="handleLogout"
          class="logout-btn"
        >
          退出登录
        </van-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { showConfirmDialog, showToast } from 'vant'
import { useUserStore } from '@/stores/user'
import { useAppStore } from '@/stores/app'

const router = useRouter()
const userStore = useUserStore()
const appStore = useAppStore()

// 设置页面标题
appStore.setTitle('我的')

// 计算属性
const userInfo = computed(() => userStore.userInfo)

// 响应式数据
const myPostsCount = ref(0)
const myFavoritesCount = ref(0)

// 跳转到登录页面
const goToLogin = () => {
  router.push('/login')
}

// 跳转到我的发布
const goToMyPosts = () => {
  if (!userStore.isLoggedIn) {
    showToast('请先登录')
    return
  }
  router.push('/my/posts')
}

// 跳转到我的收藏
const goToMyFavorites = () => {
  if (!userStore.isLoggedIn) {
    showToast('请先登录')
    return
  }
  router.push('/my/favorites')
}

// 跳转到我的评论
const goToMyComments = () => {
  if (!userStore.isLoggedIn) {
    showToast('请先登录')
    return
  }
  router.push('/my/comments')
}

// 跳转到设置页面
const goToSettings = () => {
  router.push('/settings')
}

// 跳转到关于我们
const goToAbout = () => {
  router.push('/about')
}

// 退出登录
const handleLogout = async () => {
  try {
    await showConfirmDialog({
      title: '确认退出',
      message: '确定要退出登录吗？'
    })
    
    userStore.logout()
    showToast('已退出登录')
  } catch (error) {
    // 用户取消
  }
}

// 加载统计数据
const loadStats = async () => {
  if (!userStore.isLoggedIn) return
  
  try {
    // 这里可以调用API获取统计数据
    // const stats = await userApi.getStats()
    // myPostsCount.value = stats.postsCount
    // myFavoritesCount.value = stats.favoritesCount
  } catch (error) {
    console.error('加载统计数据失败:', error)
  }
}

// 页面加载时获取数据
onMounted(() => {
  loadStats()
})
</script>

<style scoped>
.my-page {
  min-height: 100vh;
  background-color: #f1f1f1;
  padding: 16px;
  padding-bottom: 80px;
}

.user-card {
  margin-bottom: 16px;
}

.user-info,
.login-prompt {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.user-details,
.login-text {
  flex: 1;
}

.nickname,
.title {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.mobile,
.subtitle {
  font-size: 14px;
  color: #999;
}

.menu-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.menu-group {
  padding: 0;
  overflow: hidden;
}

.group-title {
  padding: 16px;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  background-color: #f8f9fa;
  border-bottom: 1px solid #f0f0f0;
}

.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  border-bottom: 1px solid #f0f0f0;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item:hover {
  background-color: #f8f9fa;
}

.menu-item:active {
  background-color: #f0f0f0;
}

.menu-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.menu-text {
  font-size: 16px;
  color: #333;
}

.menu-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.count {
  background-color: #636DEA;
  color: white;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

.logout-section {
  margin-top: 16px;
}

.logout-btn {
  width: 100%;
  border-radius: 8px;
}
</style>